/* Copyright (c) Soon.Liao 2024. All rights reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * Create Date : 2024
 * @Date: 2024-10-14 07:57:06
 * @LastEditors: soon.liao
 * @LastEditTime: 2024-10-26 14:11:09
 * @FilePath: /src/application/ws63/rgb_master/wifi/html_page.h
 * @Description: NA
 * NA
 */
#ifndef HTML_PAGE_H
#define HTML_PAGE_H

// HTML 内容，包含自动跳转
static const char HTTP_HTML_HDR[] =
    "HTTP/1.1 200 OK\r\nContent-type: text/html\r\nCache-Control: public, max-age=3600\r\n\r\n";

// ledNum,ledNum,ledBrightness
static const char HTTP_HOME_PAGE_HTML[] =
    "<!DOCTYPE html>\n"
    "<html lang=\"zh-CN\">\n"
    "<meta name=\"viewport\" http-equiv=\"Cache-Control\" content=\"width=device-width, initial-scale=1.0,no-cache, "
    "no-store, must-revalidate\">\n"
    "<head>\n"
    "    <meta charset=\"UTF-8\">\n"
    "    <title>RGB Master设置</title>\n"
    "    <style>\n"
    "        .childDiv {\n"
    "            display:inline-block;\n"
    "            vertical-align:middle;\n"
    "            margin-left: 30px;\n"
    "            margin-top: 10px;\n"
    "            margin-bottom: 10px;\n"
    "        }\n"
    "        #colorPickDiv {\n"
    "            background-color: WhiteSmoke;\n"
    "            border: 1px solid LightGrey;\n"
    "            padding-top: 20px;\n"
    "            padding-bottom: 20px;\n"
    "            padding-right: 30px;\n"
    "        }\n"
    "        #hueTipDiv {\n"
    "            margin: 0 0 10px 70px;\n"
    "        }\n"
    "        #luminanceTipDiv {\n"
    "            margin-top: 20px\n"
    "        }\n"
    "        #colorDiv {\n"
    "            width: 100px;\n"
    "            height: 100px;\n"
    "            background-color: black;\n"
    "        }\n"
    "        #valueDiv {\n"
    "            box-shadow: 0px -5px 10px LightGrey;\n"
    "            background-color: WhiteSmoke;\n"
    "            border: 1px solid LightGrey;\n"
    "            border-top-width: 0;\n"
    "            padding-right: 10px;\n"
    "            padding-bottom: 10px;\n"
    "        }\n"
    "        body {\n"
    "            margin: 0;\n"
    "            padding: 20px;\n"
    "            background-color: #f4f4f4;\n"
    "        }\n"
    "        .container {\n"
    "            max-width: 600px;\n"
    "            margin: 0 auto;\n"
    "            background: #fff;\n"
    "            padding: 20px;\n"
    "            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n"
    "        }\n"
    "        h2 {\n"
    "            text-align: center;\n"
    "        }\n"
    "        .form-group {\n"
    "            margin-bottom: 15px;\n"
    "        }\n"
    "        .form-group label {\n"
    "            display: block;\n"
    "            margin-bottom: 5px;\n"
    "        }\n"
    "        .form-group input,\n"
    "        .form-group select {\n"
    "            width: 100%;\n"
    "            padding: 8px;\n"
    "            box-sizing: border-box;\n"
    "        }\n"
    "        .buttons {\n"
    "            display: flex;\n"
    "            justify-content: space-between;\n"
    "        }\n"
    "        .buttons button {\n"
    "            width: 48%;\n"
    "            padding: 10px;\n"
    "            font-size: 16px;\n"
    "            cursor: pointer;\n"
    "        }\n"
    "    </style>\n"
    "</head>\n"
    "<body>\n"
    "    <div class=\"container\">\n"
    "        <h1>WiFi和LED灯带设置</h1>\n"
    "        <h2>LED灯带控制</h2>\n"
    "        <div id=\"colorPickDiv\">\n"
    "                <div class=\"childDiv\">\n"
    "                    <div id=\"hueTipDiv\">Hue:0</div>\n"
    "                    <canvas id=\"canvas\" width=\"200\" height=\"200\">Your browser does not support "
    "canvas</canvas>\n"
    "                </div>\n"
    "                <div class=\"childDiv\">\n"
    "                    <div id=\"saturationTipDiv\" class=\"divMarginBottom\">Saturation:0%</div>\n"
    "                    <input id=\"saturationRange\" onChange=\"onHSLRangeChange()\" type=\"range\" min=\"0\" "
    "max=\"100\" step=\"1\" value=\"100\"/>\n"
    "                    <div id=\"luminanceTipDiv\" class=\"divMarginBottom\">Luminance:0%</div>\n"
    "                    <input id=\"luminanceRange\" onChange=\"onHSLRangeChange()\" type=\"range\" min=\"0\" "
    "max=\"100\" step=\"1\" value=\"50\"/>\n"
    "                </div>\n"
    "                <div id=\"colorDiv\" class=\"childDiv\"></div>\n"
    "            </div>\n"
    "            <div id=\"valueDiv\">\n"
    // "                <div class=\"childDiv\">\n"
    // "                    <div id=\"hexadecimalTipDiv\" class=\"divMarginBottom\">Hexadecimal:</div>\n"
    // "                    <input id=\"hexadecimalValueDiv\" type=\"text\" disabled=\"disabled\" "
    // "readonly=\"readonly\"/>\n"
    // "                </div>\n"
    "                <div class=\"childDiv\">\n"
    "                    <div id=\"rgbTipDiv\" class=\"divMarginBottom\">RGB:</div>\n"
    "                    <input id=\"rgbValueDiv\" type=\"text\" disabled=\"disabled\" readonly=\"readonly\"/>\n"
    "                </div>\n"
    // "                <div class=\"childDiv\">\n"
    // "                    <div id=\"hslTipDiv\" class=\"divMarginBottom\">HSL:</div>\n"
    // "                    <input id=\"hslValueDiv\" type=\"text\" disabled=\"disabled\" readonly=\"readonly\"/>\n"
    // "                </div>\n"
    "        </div>\n"
    "        <div>\n"
    "        <form id=\"ledForm\" method=\"POST\">\n"
    "            <div class=\"buttons\">\n"
    "                <button type=\"button\" onclick=\"toggleLed()\">开关</button>\n"
    "                <button type=\"button\" onclick=\"prevMode()\">上一个模式</button>\n"
    "                <button type=\"button\" onclick=\"nextMode()\">下一个模式</button>\n"
    "                <button type=\"button\" onclick=\"prevSence()\">上一个场景</button>\n"
    "                <button type=\"button\" onclick=\"nextSence()\">下一个场景</button>\n"
    "            </div>\n"
    "            <div class=\"form-group\">\n"
    "                <label for=\"ledBrightness\">LED亮度</label>\n"
    "                <input type=\"range\" id=\"ledBrightness\" name=\"ledBrightness\" min=\"0\" max=\"255\" "
    "step=\"1\" value=${brightnessValue} onchange=\"changeBrightness()\" required>\n"
    "                <div id=\"ledBrightnessValue\">${brightnessValue}</div>\n"
    "            </div>\n"
    "        </form>\n"
    "        </div>\n"
    "        <h2>LED灯带设置</h2>\n"
    "        <div>\n"
    "        <form id=\"ledCountForm\" method=\"POST\">\n"
    "            <div class=\"buttons\">\n"
    "                <button type=\"button\" onclick=\"radarOn()\">开启雷达感应</button>\n"
    "                <button type=\"button\" onclick=\"radarOff()\">关闭雷达感应</button>\n"
    "            </div>\n"
    "            <div class=\"buttons\">\n"
    "                <button type=\"button\" onclick=\"startSLE()\">开始SLE配对</button>\n"
    "                <button type=\"button\" onclick=\"stopSLE()\">停止SLE配对</button>\n"
    "            </div>\n"
    "            <div class=\"form-group\">\n"
    "                <label for=\"ledCount\">LED灯珠个数:</label>\n"
    "                <select id=\"ledCount\" name=\"ledCount\" required>\n"
    "                </select>\n"
    "            </div>\n"
    "            <div class=\"buttons\">\n"
    "                <button type=\"button\" onclick=\"submitLEDCount()\">保存灯珠设置</button>\n"
    "            </div>\n"
    "        </form>\n"
    "        </div>\n"
    "        <h2>WiFi配置</h2>\n"
    "        <div>\n"
    "        <form id=\"wifiInfoForm\" method=\"POST\">\n"
    "            <div class=\"form-group\">\n"
    "                <label for=\"ssid\">WiFi SSID:</label>\n"
    "                <input type=\"text\" id=\"ssidInput\" name=\"ssid\" placeholder=\"Enter WiFi SSID\" required>\n"
    "                <label for=\"password\">WiFi 密码:</label>\n"
    "                <input type=\"password\" id=\"passwordInput\" name=\"password\" placeholder=\"Enter WiFi "
    "Password\" required>\n"
    "            </div>\n"
    "            <div class=\"buttons\">\n"
    "                <button type=\"button\" onclick=\"submitWifi()\">保存WiFi设置</button>\n"
    "                <button type=\"button\" onclick=\"clearWifi()\">清除WiFi设置</button>\n"
    "            </div>\n"
    "        </form>\n"
    "        </div>\n"
    "    </div>\n"
    "\n"
    "    <script>\n"
    "            var c = document.getElementById(\"canvas\");\n"
    "            var ctx = c.getContext(\"2d\");\n"
    "            var colorDiv = document.getElementById(\"colorDiv\");\n"
    //"            var hexadecimalValueDiv = document.getElementById(\"hexadecimalValueDiv\");\n"
    "            var rgbValueDiv = document.getElementById(\"rgbValueDiv\");\n"
    //"            var hslValueDiv = document.getElementById(\"hslValueDiv\");\n"
    "            var hexadecimalTipDiv = document.getElementById(\"hexadecimalTipDiv\");\n"
    "            var saturationTipDiv = document.getElementById(\"saturationTipDiv\");\n"
    "            var saturationRange = document.getElementById(\"saturationRange\");\n"
    "            var luminanceTipDiv = document.getElementById(\"luminanceTipDiv\");\n"
    "            var luminanceRange = document.getElementById(\"luminanceRange\");\n"
    "            var ledBrightness = document.getElementById(\'ledBrightness\');\n"
    "            var ledBrightnessValue = document.getElementById(\'ledBrightnessValue\');\n"
    "            var ledCount = document.getElementById(\'ledCount\');\n"
    "\n"
    "            //十字光标颜色\n"
    "            var crossCursorColor = \"black\";\n"
    "            //十字光标线宽\n"
    "            var crossCursorLineWidth = 2;\n"
    "            //十字光标某一边线段长\n"
    "            var crossCursorHalfLineLen = 5;\n"
    "            //十字光标中间断裂处长度\n"
    "            var crossCursorHalfBreakLineLen = 2;\n"
    "\n"
    "            //画布中心点X坐标\n"
    "            var centerX = c.width / 2;\n"
    "            //画布中心点Y坐标\n"
    "            var centerY = c.height / 2;\n"
    "            //缩放绘制比例\n"
    "            var scaleRate = 10;\n"
    "            //画布的内切圆半径(之所以减去一个数是为了可以显示完整的十字光标)\n"
    "            var innerRadius = Math.min(centerX, centerY) - crossCursorHalfLineLen - crossCursorHalfBreakLineLen;\n"
    "            //内切圆半径的平方\n"
    "            var pow2InnerRadius = Math.pow(innerRadius, 2);\n"
    "            //缩放绘制时的绘制半径，即画布的外径除以缩放比例\n"
    "            var scaledRadius = Math.sqrt(Math.pow(c.width / 2, 2) + Math.pow(c.height / 2, 2)) / scaleRate;\n"
    "            //由于该圆是由绕圆心的多条线段组成，该值表示将圆分割的份数\n"
    "            var count = 360;\n"
    "            //一整个圆的弧度值\n"
    "            var doublePI = Math.PI * 2;\n"
    "            "
    "//"
    "由于圆心处是多条线段的交汇点，Composite是source-"
    "over模式，所以后绘制的线段会覆盖前一个线段。另外由于采用线段模拟圆\n"
    "            var deprecatedRadius = innerRadius * 0.3;\n"
    "            //废弃圆半径的平方\n"
    "            var pow2DeprecatedRadius = Math.pow(deprecatedRadius, 2);\n"
    "\n"
    "            //色相(0-360)\n"
    "            var hue;\n"
    "            //饱和度(0 - 100)\n"
    "            var saturation; \n"
    "            //亮度luminance或明度lightness(0-100)\n"
    "            var luminance;\n"
    "\n"
    "            //当前色相位置X坐标\n"
    "            var currentHuePosX = centerX + innerRadius - 1;\n"
    "            //当前色相位置Y坐标\n"
    "            var currentHuePosY = centerY;\n"
    "\n"
    "        var brightnessValue = 10;\n"
    "        var ledCountValue = 10;\n"
    "\n"
    "       async function getLEDNum() {\n"
    "           try {\n"
    "               const response = await fetch(\'/getLEDNum\', { method: 'GET' });\n"
    "               if (!response.ok) {\n"
    "                   throw new Error(\'Network response was not ok \' + response.statusText);\n"
    "               }\n"
    "               const data = await response.json();\n"
    //"               alert(\`LED灯珠个数数据 ${data}\`);\n"
    "               ledCount.value = data.ledCount;\n"
    "               ledCountValue = data.ledCount;\n"
    //"               alert(\`LED灯珠个数已更新 ${data.ledCount}\`);\n"
    "           } catch (error) {\n"
    "               console.error(\'There was a problem with the fetch operation:\', error);\n"
    "               ledCount.value = \'Error: \' + error.message;\n"
    "               alert(\'获取LED灯珠个数时出错\');\n"
    "           }\n"
    "       }\n"
    "\n"
    "       async function getBrightness() {\n"
    "           try {\n"
    "               const response = await fetch(\'/getBrightness\', { method: 'GET' });\n"
    "               if (!response.ok) {\n"
    "                   throw new Error(\'Network response was not ok \' + response.statusText);\n"
    "               }\n"
    "               const data = await response.json();\n"
    //"               alert(\`LED亮度数据 ${data.brightness}\`);\n"
    "               ledBrightnessValue.textContent = data.brightness;\n"
    "               ledBrightness.value = data.brightness;\n"
    "               brightnessValue = data.brightness;\n"
    "           } catch (error) {\n"
    "               console.error(\'There was a problem with the fetch operation:\', error);\n"
    "               ledBrightnessValue.textContent = \'Error: \' + error.message;\n"
    "               alert(\'获取LED亮度时出错\');\n"
    "           }\n"
    "       }\n"
    "\n"
    "        function generateLedCountOptions() {\n"
    "            const selectElement = document.getElementById(\'ledCount\');\n"
    "            for (let i = 1; i <= 254; i++) {\n"
    "                const optionElement = document.createElement(\'option\');\n"
    "                optionElement.value = i;\n"
    "                optionElement.text = i;\n"
    "                selectElement.appendChild(optionElement);\n"
    "            }\n"
    "            selectElement.value = ledCountValue;\n"
    "        }\n"
    "\n"
    "        window.onload = function() {\n"
    "            getLEDNum();\n"
    "            getBrightness();\n"
    "            generateLedCountOptions();\n"
    "        };\n"
    "\n"
    "        function submitLEDCount() {\n"
    "            var ledCountValue = document.getElementById(\"ledCount\").value;\n"
    "            if (!ledCountValue) {\n"
    "                alert(\"请输入有效的LED数量\");\n"
    "                return;\n"
    "            }\n"
    "            var jsonData = {\n"
    "                ledCount: ledCountValue\n"
    "            };\n"
    "            var jsonString = JSON.stringify(jsonData);\n"
    "            fetch(\'/submitLEDCount\', {\n"
    "                method: \'POST\',\n"
    "                headers: {\n"
    "                    \'Content-Type\': \'application/json\'\n"
    "                },\n"
    "                body: jsonString \n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED数量: ${ledCountValue}\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function toggleLed() {\n"
    "            fetch(\'/toggleLed\', {\n"
    "                method: \'POST\',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带开关状态翻转\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function prevMode() {\n"
    "            fetch(\'/prevMode\', {\n"
    "                method: \'POST\',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带切换上一个模式\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function nextMode() {\n"
    "            fetch(\'/nextMode\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带切换下一个模式\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "\n"
    "        function prevSence() {\n"
    "            fetch(\'/prevSence\', {\n"
    "                method: \'POST\',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带切换上一个场景\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function nextSence() {\n"
    "            fetch(\'/nextSence\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带切换下一个场景\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function changeBrightness() {\n"
    "            ledBrightnessValue.textContent = ledBrightness.value;\n"
    "            var jsonData = {\n"
    "                brightness: ledBrightness.value\n"
    "            };\n"
    "            var jsonString = JSON.stringify(jsonData);\n"
    "            fetch(\'/setBrightness\', {\n"
    "                method: \'POST\',\n"
    "                headers: {\n"
    "                    \'Content-Type\': \'application/json\'\n"
    "                },\n"
    "                body: jsonString \n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带亮度已调节 ${ledBrightness.value}\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function submitWifi() {\n"
    "            var ssidValue = document.getElementById(\"ssidInput\").value;\n"
    "            var passwordValue = document.getElementById(\"passwordInput\").value;\n"
    "            if (!ssidValue || !passwordValue) {\n"
    "                alert(\"请输入有效的SSID 和密码\");\n"
    "                return;\n"
    "            }\n"
    "            var jsonData = {\n"
    "                ssid: ssidValue,\n"
    "                password: passwordValue,\n"
    "            };\n"
    "            var jsonString = JSON.stringify(jsonData);\n"
    "            fetch(\'/submitWifi\', {\n"
    "                method: \'POST\',\n"
    "                headers: {\n"
    "                    \'Content-Type\': \'application/json\'\n"
    "                },\n"
    "                body: jsonString \n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`ssid: ${ssidValue}\npassword: ${passwordValue}\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function clearWifi() {\n"
    "            fetch(\'/clearWifi\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`清除WIFI信息\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function startSLE() {\n"
    "            fetch(\'/startSLE\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`开始SLE配对\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function stopSLE() {\n"
    "            fetch(\'/stopSLE\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`清除SLE配对\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function radarOn() {\n"
    "            fetch(\'/radarOn\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`开启雷达感应\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function radarOff() {\n"
    "            fetch(\'/radarOff\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`关闭雷达感应\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function submitRGB() {\n"
    "            var rValue = document.getElementById(\"ssidInput\").value;\n"
    "            var passwordValue = document.getElementById(\"passwordInput\").value;\n"
    "            if (!ssidValue || !passwordValue) {\n"
    "                alert(\"请输入有效的SSID 和密码\");\n"
    "                return;\n"
    "            }\n"
    "            var jsonData = {\n"
    "                ssid: ssidValue,\n"
    "                password: passwordValue,\n"
    "            };\n"
    "            var jsonString = JSON.stringify(jsonData);\n"
    "            fetch(\'/submitWifi\', {\n"
    "                method: \'POST\',\n"
    "                headers: {\n"
    "                    \'Content-Type\': \'application/json\'\n"
    "                },\n"
    "                body: jsonString \n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`ssid: ${ssidValue}\npassword: ${passwordValue}\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "            //填充圆\n"
    "            function fillCircle(cx, cy, r, color) {\n"
    "                ctx.fillStyle = color;\n"
    "                ctx.beginPath();\n"
    "                ctx.arc(cx, cy, r, 0, doublePI);\n"
    "                ctx.fill();\n"
    "            }\n"
    "\n"
    "            //绘制线条\n"
    "            function strokeLine(x1, y1, x2, y2) {\n"
    "                ctx.beginPath();\n"
    "                ctx.moveTo(x1, y1);\n"
    "                ctx.lineTo(x2, y2);\n"
    "                ctx.stroke();\n"
    "            }\n"
    "\n"
    "            //将整数转为16进制，至少保留2位\n"
    "            function toHexString(intValue) {\n"
    "                var str = intValue.toString(16);\n"
    "                if(str.length == 1) {\n"
    "                    str = \"0\" + str;\n"
    "                }\n"
    "                return str;\n"
    "            }\n"
    "\n"
    "            //判断坐标(x,y)是否在合法的区域内\n"
    "            function isInValidRange(x, y) {\n"
    "                var pow2Distance = Math.pow(x-centerX, 2) + Math.pow(y-centerY, 2);\n"
    "                return pow2Distance >= pow2DeprecatedRadius && pow2Distance <= pow2InnerRadius;\n"
    "            }\n"
    "\n"
    "            //绘制十字光标\n"
    "            function strokeCrossCursor(x, y) {\n"
    "                ctx.globalCompositeOperation = \"source-over\";\n"
    "                ctx.strokeColor = crossCursorColor;\n"
    "                ctx.lineWidth = crossCursorLineWidth;\n"
    "                strokeLine(x, y-crossCursorHalfBreakLineLen, x, "
    "y-crossCursorHalfBreakLineLen-crossCursorHalfLineLen);\n"
    "                strokeLine(x, y+crossCursorHalfBreakLineLen, x, "
    "y+crossCursorHalfBreakLineLen+crossCursorHalfLineLen);\n"
    "                strokeLine(x-crossCursorHalfBreakLineLen, y, "
    "x-crossCursorHalfBreakLineLen-crossCursorHalfLineLen, y);\n"
    "                strokeLine(x+crossCursorHalfBreakLineLen, y, "
    "x+crossCursorHalfBreakLineLen+crossCursorHalfLineLen, y);\n"
    "            }\n"
    "\n"
    "            //将对象中的hsl分量组成一个hsl颜色(h在0到360之间，s与l均在0到1之间)\n"
    "            function formHslColor(obj) {\n"
    "                return \"hsl(\" + obj.h + \",\" + Math.round(obj.s * 1000)/10 + \"%,\" + Math.round(obj.l * "
    "1000)/10 + \"%)\"; \n"
    "            }\n"
    "\n"
    "            //将对象中的rgb分量组成一个rgb颜色(r,g,b在0到255之间)\n"
    "            function formRgbColor(obj) {\n"
    "                return \"rgb(\" + [obj.r, obj.g, obj.b].join(\",\") + \")\";\n"
    "            }\n"
    "\n"
    "            //从画布的某点获取存储RGB的对象\n"
    "            function getRgbObj(x, y) {\n"
    "                var w = 1;\n"
    "                var h = 1;\n"
    "                var imgData = ctx.getImageData(x,y,w,h);\n"
    "                var obj = {\n"
    "                    r: imgData.data[0],\n"
    "                    g: imgData.data[1],\n"
    "                    b: imgData.data[2],\n"
    "                    a: imgData.data[3]\n"
    "                }\n"
    "                return obj;\n"
    "            }\n"
    "\n"
    "            //将rgb转换为hsl对象()\n"
    "            function rgbToHslObj(r, g, b) {\n"
    "                r /= 255;\n"
    "                g /= 255;\n"
    "                b /= 255;\n"
    "                var max = Math.max(r, g, b);\n"
    "                var min = Math.min(r, g, b);\n"
    "                var diff = max - min;\n"
    "                var twoValue = max + min;\n"
    "                var obj = {h:0, s:0, l:0};\n"
    "                if(max == min) {\n"
    "                    obj.h = 0;\n"
    "                } else if(max == r && g >= b) {\n"
    "                    obj.h = 60 * (g - b) / diff;\n"
    "                } else if(max == r && g < b) {\n"
    "                    obj.h = 60 * (g - b) / diff + 360;\n"
    "                } else if(max == g) {\n"
    "                    obj.h = 60 * (b - r) / diff + 120;\n"
    "                } else if(max == b) {\n"
    "                    obj.h = 60 * (r - g) / diff + 240;\n"
    "                }\n"
    "                obj.l = twoValue / 2;\n"
    "                if(obj.l == 0 || max == min) {\n"
    "                    obj.s = 0;\n"
    "                } else if(0 < obj.l && obj.l <= 0.5) {\n"
    "                    obj.s = diff / twoValue;\n"
    "                    //obj.s = diff / (2 * obj.l);\n"
    "                } else {\n"
    "                    obj.s = diff / (2 - twoValue);\n"
    "                    //obj.s = diff / (2 - 2 * obj.l);\n"
    "                }\n"
    "                obj.h = Math.round(obj.h);\n"
    "                return obj;\n"
    "            }\n"
    "\n"
    "            //创建Hue颜色圆环\n"
    "            function createHueRing() {\n"
    "                ctx.globalCompositeOperation = \"source-over\";\n"
    "                ctx.clearRect(0,0,c.width,c.height);\n"
    "                ctx.save();\n"
    "                //将绘制原点移动到画布中心\n"
    "                ctx.translate(centerX, centerY);\n"
    "                //将画布放大相应比例，restore后，绘制内容会缩小\n"
    "                ctx.scale(scaleRate, scaleRate);\n"
    "                for(var i=0; i<count; i++) {\n"
    "                    var degree = i / count * 360;\n"
    "                    var radian = Math.PI * degree / 180;\n"
    "                    var x = scaledRadius * Math.cos(radian);\n"
    "                    var y = scaledRadius * Math.sin(radian);\n"
    "                    ctx.lineWidth=1;\n"
    "                    ctx.strokeStyle = \"hsl(\" + degree +\",\" + saturation + \",\" + luminance + \")\";\n"
    "                    ctx.beginPath();\n"
    "                    ctx.moveTo(x, y);\n"
    "                    ctx.lineTo(0,0);\n"
    "                    ctx.stroke();\n"
    "                }\n"
    "                ctx.restore();\n"
    "                ctx.globalCompositeOperation = \"destination-out\";\n"
    "                fillCircle(centerX, centerY, deprecatedRadius, \"black\");\n"
    "\n"
    "                ctx.globalCompositeOperation = \"destination-in\";\n"
    "                fillCircle(centerX, centerY, innerRadius, \"black\");\n"
    "            }\n"
    "\n"
    "            function sendColorValue(x, y) {\n"
    "                //获取包含rgb的颜色对象\n"
    "                var rgbObj = getRgbObj(x, y);\n"
    "                var rgbColor = formRgbColor(rgbObj);\n"
    "                var jsonData = {\n"
    "                    r: rgbObj.r,\n"
    "                    g: rgbObj.g,\n"
    "                    b: rgbObj.b,\n"
    "                };\n"
    "                var jsonString = JSON.stringify(jsonData);\n"
    "                fetch(\'/submitRGB\', {\n"
    "                   method: \'POST\',\n"
    "                   headers: {\n"
    "                       \'Content-Type\': \'application/json\'\n"
    "                   },\n"
    "                   body: jsonString \n"
    "               })\n"
    "               .then(response => response.json())\n"
    "               .then(data => {\n"
    "                   alert(\`r: ${rgbObj.r}\ng: ${rgbObj.g}\nb: ${rgbObj.b}\`);\n"
    "               })\n"
    "               .catch(error => console.error(\'Error:\', error));\n"
    "            }\n"
    "\n"
    "            //点击canvas中的Hue拾色圈\n"
    "            function onCanvasClick() {\n"
    "                var x = event.offsetX;\n"
    "                var y = event.offsetY;\n"
    "                if(!isInValidRange(x, y)) {\n"
    "                    return;\n"
    "                }\n"
    "                currentHuePosX = x;\n"
    "                currentHuePosY = y;\n"
    "                //创建hue背景圆环\n"
    "                createHueRing();\n"
    "                setColorValue(x, y);\n"
    "                strokeCrossCursor(x, y);\n"
    "                sendColorValue(x, y);\n"
    "            }\n"
    "\n"
    "            function setColorValue(x, y) {\n"
    "                //获取包含rgb的颜色对象\n"
    "                var rgbObj = getRgbObj(x, y);\n"
    "                var rgbColor = formRgbColor(rgbObj);\n"
    "                colorDiv.style.backgroundColor = rgbColor;\n"
    "                rgbValueDiv.value = rgbColor;\n"
    "                var hex = \"#\" + toHexString(rgbObj.r) + toHexString(rgbObj.g) + toHexString(rgbObj.b);\n"
    //"                hexadecimalValueDiv.value = hex;\n"
    "\n"
    "                var hslObj = rgbToHslObj(rgbObj.r, rgbObj.g, rgbObj.b);\n"
    //"                hslValueDiv.value = formHslColor(hslObj);\n"
    "                hueTipDiv.innerHTML = (\"Hue：\" + hslObj.h);\n"
    "            }\n"
    "\n"
    "            function onHSLRangeChange() {\n"
    "                //event.target.value;\n"
    "                saturation = saturationRange.value + \"%\";\n"
    "                luminance = luminanceRange.value + \"%\";\n"
    "                saturationTipDiv.innerHTML = (\"Saturation：\" + saturation);\n"
    "                luminanceTipDiv.innerHTML = (\"Luminance：\" + luminance);\n"
    "                createHueRing();\n"
    "                setColorValue(currentHuePosX, currentHuePosY);\n"
    "                strokeCrossCursor(currentHuePosX, currentHuePosY);\n"
    "            }\n"
    "\n"
    "            function init() {\n"
    "                getLEDNum();\n"
    "                getBrightness();\n"
    "                c.addEventListener(\"click\", onCanvasClick);\n"
    "                onHSLRangeChange();\n"
    "            }\n"
    "\n"
    "            init();\n"
    "\n"
    "    </script>\n"
    "</body>\n"
    "</html>";

#endif